<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="${path}/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="${path}/static/css/font-awesome.min.css">
    <link rel="stylesheet" href="${path}/static/css/main.css">
    <link rel="stylesheet" href="${path}/static/css/doc.min.css">
    <style>
        .tree li {
            list-style-type: none;
            cursor:pointer;
        }
    </style>
</head>

<body>

<%--顶部导航栏--%>
<jsp:include page="${path}/static/nav.jsp"/>

<div class="container-fluid">
    <div class="row">

        <%--左侧导航栏--%>
        <jsp:include page="${path}/static/left.jsp"/>

        <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
            <ol class="breadcrumb">
                <li><a href="${path}/main">首页</a></li>
                <li><a href="${path}/user/index">数据列表</a></li>
                <li class="active">分配角色</li>
            </ol>
            <div class="panel panel-default">
                <div class="panel-body">
                    <form role="form" id="assignForm" class="form-inline">
                        <input type="hidden" id="userid" name="userid" value="${userid}">
                        <div class="form-group">
                            <label for="nullassignrole">未分配角色列表</label><br>
                            <select class="form-control" id="nullassignrole" name="nullrole" multiple size="10" style="width:100px;overflow-y:auto;">
                            </select>
                        </div>
                        <div class="form-group">
                            <ul>
                                <li id="btninsert" class="btn btn-default glyphicon glyphicon-chevron-right"></li>
                                <br>
                                <li id="btndelete" class="btn btn-default glyphicon glyphicon-chevron-left" style="margin-top:20px;"></li>
                            </ul>
                        </div>
                        <div class="form-group" style="margin-left:40px;">
                            <label for="isassignrole">已分配角色列表</label><br>
                            <select class="form-control" id="isassignrole" name="isrole" multiple size="10" style="width:100px;overflow-y:auto;">
                            </select>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${path}/static/jquery/jquery-2.1.1.min.js"></script>
<script src="${path}/static/bootstrap/js/bootstrap.min.js"></script>
<script src="${path}/static/script/docs.min.js"></script>
<script src="${path}/static/layer/layer.js"></script>
<script type="text/javascript">
    $(function () {
        $(".list-group-item").click(function(){
            if ( $(this).find("ul") ) {
                $(this).toggleClass("tree-closed");
                if ( $(this).hasClass("tree-closed") ) {
                    $("ul", this).hide("fast");
                } else {
                    $("ul", this).show("fast");
                }
            }
        });
        //显示页面信息
        showList();
    });


    function showList(){
        $.ajax({
            url:"${path}/userrole/assignRoleList",
            method:"post",
            data:{"userid":${userid}},
            datatype:"json",
            error:function (err) {
                alert("失败");
            },
            success:function (obj) {
                if (obj.result){
                    //未拥有的角色
                    var nullassign = "";
                    if (obj.nullassignrole!=null){
                        $.each(obj.nullassignrole,function (index,role) {
                            nullassign += '<option value="'+role.roleid+'">'+role.rolename+'</option>';
                        });
                    }
                    $("#nullassignrole").html(nullassign);

                    //已拥有的角色
                    var isassign = "";
                    if (obj.isassignrole!=null){
                        $.each(obj.isassignrole,function (index,role) {
                            isassign += '<option value="'+role.roleid+'">'+role.rolename+'</option>';
                        });
                    }
                    $("#isassignrole").html(isassign);

                }
            }
        });
    }

    $("#btninsert").click(function(){
        $.ajax({
            url:"${path}/userrole/save",
            method:"post",
            data: $("#assignForm").serialize(),
            dataType:"json",
            error:function () {
                alert("失败");
            },
            success:function (obj) {
                if(obj){
                    showList();
                }
            }
        });
    });

    $("#btndelete").click(function(){
        $.ajax({
            url:"${path}/userrole/delete",
            method:"post",
            data:$("#assignForm").serialize(),
            dataType:"json",
            error:function () {
                alert("失败");
            },
            success:function (obj) {
                if(obj){
                    showList();
                }
            }
        });
    });


</script>
</body>
</html>
